<template>
  <el-dialog class="rankInfo" v-model="formVisible" :title="title" center draggable width="500">
    <el-form ref="refRankForm" :model="rankInfo"  :rules="verifyRules" label-width="80px">
      <div class="rankForm">
        <el-form-item prop="type" label="类别">
          <el-select v-model="rankInfo.type" style="width: 100%">
            <el-option
                v-for="item in rankTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="situation" label="情形">
          <el-input
              v-model="rankInfo.situation"
              autosize
              maxlength="256"
              placeholder="请输入情形信息"
              show-word-limit
              type="textarea"/>
        </el-form-item>
      </div>
      <el-button :loading="loading" type="primary" style="width:100%;margin-top:20px;"
                 @click.prevent="handleAdd(refRankForm)">提 交</el-button>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "RankInfo"
}
</script>

<script setup lang="ts">
import {PropType, reactive, ref, watch} from "vue";
import {IRankAdjust} from "@/iwb/IParty";
import {FormInstance, FormRules} from "element-plus";
import {addRankAdjust} from "@/api/party";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: Object as PropType<IRankAdjust>
});
const loading = ref(false);
const formVisible = ref(false);
const title = ref('等次配置基本信息');
const rankInfo = ref({} as IRankAdjust);
const refRankForm = ref<FormInstance>();

const verifyRules = reactive<FormRules>({
  type: [{required: true, trigger: 'blur', message: '请选择类别'}],
  situation: [{required: true, trigger: 'blur', message: '请输入情形'}],
})

const rankTypeOption = [{
  value: '提升等次',
  label: '提升等次',
},{
  value: '降低等次',
  label: '降低等次',
}];

const handleAdd = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  loading.value = true;
  formEl.validate((valid: boolean, fields) => {
    addRankAdjust(rankInfo.value).then(()=> {
      formVisible.value = false;
      loading.value = false;
      emit('reload:data');
    }).catch(error => {
      loading.value = false;
      console.error(error);
    })
  }).catch(erro => {
    console.error(erro);
    loading.value = false;
  });
}

const emit = defineEmits(['update:visible', 'reload:data']);

watch(
    () => formVisible.value,
    (val) => {
      emit('update:visible', val);
    },
);

watch(
    () => props.visible,
    (val) => {
      formVisible.value = val;
    },
);

watch(
    () => props.data,
    (val) => {
      if (val) {
        rankInfo.value = val;
      }
    },
);

</script>

<style scoped lang="scss">
.rankInfo {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.rankForm {
  margin: 10px;

  :deep(.rankForm) {
    .el-select {
      width: 100%;
    }
  }
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>